import React,{FC} from 'react'
import {NavLink} from 'react-router-dom'
import { Tabbar } from 'react-vant'
import {RouterList,RouterItem,RootState} from "../utils/index"
import {useSelector} from "react-redux"

type Props = {
    mainRouter?:RouterList
}

const My_footer:FC<Props> = ({mainRouter}) => {
  const shopcar_data = useSelector((state:RootState) => state.shopcar_data)
  return (
    <>
      <Tabbar>
        {
          mainRouter?.map((item:RouterItem,index:number)=>{
            return   <Tabbar.Item  key={index} badge={item.badge?{content:shopcar_data.length}:{}}  icon={item.icon}>
                <NavLink to={item.path as string}>{item.title}</NavLink>
            </Tabbar.Item>
          })
        }
      </Tabbar>
    </>
  )
}

export default My_footer